<template>
  <div class="add-img-con" :style="getStyles">
    <div v-if="imgUrl" class="img-con">
      <div class="btns-con">
        <el-button v-if="isCrop" type="primary" size="small" @click.stop="onCrop" class="btn-crop">
          <el-icon><i class="jy-icon-crop"></i></el-icon>
        </el-button>
        <el-button v-if="isDelete" type="danger" size="small" class="btn-delete" @click.stop="onDelete" >
          <el-icon><i class="jy-icon-delete"></i></el-icon>
        </el-button>
      </div>
      <img :src="imgUrl">
      <p class="info" @click.stop="onShowImgPop">点击更换</p>
    </div>
    <div v-else class="img-con" @click.stop="onShowImgPop"><i class="jy-icon-plus"></i> 添加图片</div>
  </div>
</template>


<script setup lang="ts">
import { MEDIAS } from '@/const/web/'
import { getPxOVwByValue } from '@/utils'
import { useWebSiteStore } from '@/store/web/site'
import { useWebPageStore } from '@/store/web/page'
import { useWebComponentStore } from '@/store/web/component'
import { useWebMediaStore } from '@/store/web/media'
import { useWebControlsStore } from '@/store/web/controls'

</script>